<!-- navbar -->
<template>
  <div class="">
    <ul class="list flex">
      <li class="item flex column align center">
        <img src="@/assets/images/logo.png" class="logo" />
        <span>中国音乐家协会江西考区</span>
      </li>
      <li class="item flex column align center">
        {{ number }}{{ title ? title : "考卷阅卷中" }}
      </li>
      <li class="home" @click="navFirstBack">首页</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["number", "title"],
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState(["idx"]),
  },
  methods: {
    navFirstBack() {
      console.log(this.idx )
      if (this.idx == 1) {
        this.$router.replace("/home/markedPaper");
      }if (this.idx == 2) {
        this.$router.replace("/home/parperVideo");
      } else {
        this.$router.replace("/home/change");
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang='less' scoped>
.list {
  position: relative;
  width: 100%;
  > .item:first-child {
    background: @main-color;
    padding: 10px;
    width: 16%;

    .logo {
      width: 50px;
      height: 50px;
    }
    span {
      font-size: 24px;
      color: #fff;
      line-height: 1.5;
    }
  }
  .item {
    width: 84%;
    height: 114px;
    font-size: 40px;
    font-weight: bold;
    color: #1d1b1b;
    text-align: center;
    background: #fff;
  }
  .home {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #d74939;
  }
  .home:hover {
    color: skyblue;
  }
}
</style>